<template>
  <a-layout class="layout">
    <a-layout-header class="header">
      <a-menu
        theme="dark"
        mode="horizontal"
        v-model:selectedKeys="selectedKeys_top"
        :style="{ lineHeight: '64px' }"
        class="menu"
      >
        <a-menu-item key="home">
          <a
            href="/home"
            target="_blank"
            rel="noopener noreferrer"
            class="home"
          >
            终点中文网
          </a>
        </a-menu-item>
        <a-menu-item key="1">科幻</a-menu-item>
        <a-menu-item key="3">玄幻</a-menu-item>
        <a-menu-item key="3">历史</a-menu-item>
        <a-menu-item key="4">军事</a-menu-item>
        <a-menu-item key="5">惊悚</a-menu-item>
        <a-menu-item key="6">出版</a-menu-item>
        <a-menu-item key="shelf" class="init"> 我的书架 </a-menu-item>
        <a-menu-item key="user" class="init">{{ user.u_name }}</a-menu-item>
        <a-menu-item key="search" class="init">搜索</a-menu-item>
      </a-menu>
    </a-layout-header>

    <a-layout-content style="padding: 0px 20%">
      <!-- 面包屑 -->
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item><a href="/home">首页</a></a-breadcrumb-item>
        <a-breadcrumb-item><a href="/home">{{ info.cla_name }}</a></a-breadcrumb-item>
        <a-breadcrumb-item>
          <a href="#">{{ info.b_name }}</a>
        </a-breadcrumb-item>
      </a-breadcrumb>

      <!-- info -->
      <div
        :style="{ background: '#fff', padding: '24px', minHeight: '280px' }"
        id="show"
      >
        <form id="info_1">
          <div id="img">
            <img src="./b_1001.jpg" alt="图片" class="img" />
          </div>
          <div id="info_1_1">
            <div id="b_name">
              <h1>
                <b>{{ info.b_name }}</b>
              </h1>
            </div>
            <div id="u_name">{{ info.u_name }} 著</div>
            <div id="tag">
              <a-button
                type="primary"
                ghost
                shape="round"
                size="small"
                class="tag"
                >{{ staMap[info.b_status] }}</a-button
              >
              <a-button
                type="danger"
                ghost
                shape="round"
                size="small"
                class="tag"
                >{{ info.cla_name }}</a-button
              >
            </div>
            <div id="function">
              <a-button type="primary" ghost class="mybutton"
                >免费试读</a-button
              >
              <a-button type="primary" ghost class="mybutton"
                >加入书架</a-button
              >
              <a-button type="primary" ghost class="mybutton">订阅</a-button>
            </div>
          </div>
          <div id="info_1_2" v-if="value != 0">
            <a-rate
              v-model:value="value"
              allow-half
              @change="score"
            />&nbsp;&nbsp;{{ value * 2 }}
          </div>
          <div id="info_1_2" v-else>
            <a-rate
              v-model:value="value"
              allow-half
              @change="score"
            />&nbsp;&nbsp;评分
          </div>
        </form>

        <form id="info_2">
          <a-menu
            v-model:selectedKeys="selectedKeys_funs"
            mode="horizontal"
          >
            <a-menu-item key="intro" @click="intro"> 作品信息 </a-menu-item>
            <a-menu-item key="contents" @click="contents">
              目录（共xxx章）
            </a-menu-item>
            <a-menu-item key="bfCircle" @click="bfCircle">
              书友圈
            </a-menu-item>
          </a-menu>
          <router-view></router-view>
        </form>
      </div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      ZhongDian ©2021 Designed by ZHAO YU
    </a-layout-footer>
  </a-layout>
</template>
<script setup>
import { defineComponent, reactive, ref } from "vue";
import { get, post, setLocalToken, tip } from "@/common";
import { useRouter } from "vue-router";
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";

const router = useRouter(); //获取路由器
const selectedKeys_top = ref(["home"]);
const selectedKeys_funs = ref(["intro"]);

const staMap = ref({
  0: "连载",
  1: "下架",
  2: "完结",
});

const user = ref({
  u_name: "莫默",
});
const value = ref();

const b_id = ref(null);

const info = ref({});

const getInfo = () => {
  b_id.value = window.location.search.split("=")[1];
  console.log("通过书籍编号 b_id = " + b_id.value + "获取书籍信息！");

  if (b_id.value == null) {
    console.log("警告：系统错误！搜索关键字为空！");
    return;
  }

  post("/book/detail/info/" + b_id.value).then((res) => {
    console.log("获得书籍信息！");
    info.value = res.data;
    console.log(window.location);
  });

  get("/book/detail/getScore/" + b_id.value).then((res) => {
    console.log("获得书籍评分!");
    value.value = res.data / 2;
    console.log(Math.ceil(value));
    console.log(value);
  });
};

getInfo();

const intro = () => {
  console.log("简介");
  router.push({ path: "/info/intro", query: { id: b_id.value} });
  
};

const contents = () => {
  console.log("目录");
  router.push({ path: "/info/contents", query: { id: b_id.value} });
}

const bfCircle = () => {
  console.log("书友圈");
  router.push({ path: "/info/bfCircle", query: { id: b_id.value} });
}

const score = (number) => {
  const score = reactive({
    b_id,
    score: number * 2,
  });
  post("/book/detail/setScore", score).then((res) => {
    console.log(res);
  });
};
</script>
<style>
.site-layout-content {
  min-height: 280px;
  padding: 24px;
  background: #fff;
}
#components-layout-demo-top .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

#show {
  display: flex; /* 定义本元素（#app）是一个flex（柔性布局/灵活布局）盒子  */
  flex-direction: column; /*内部元素按列排列*/
  justify-content: center; /*主轴居中*/
  align-items: center; /*交叉轴居中*/
}
form {
  width: 100%;
  box-shadow: rgb(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 30px;
  border-radius: 8px;
}
.menu {
  padding-left: 18%;
  padding-right: 18%;
}
.init {
  float: right;
}

#info_1 {
  height: 232px;
}
#info_2 {
  margin-top: 30px;
}

#img {
  width: 20%;
  height: 100%;
  float: left;
  display: inline;
}
.img {
  width: 80%;
  height: auto;
}
#info_1_1 {
  width: 60%;
  height: 100%;
  float: left;
  padding: 10px, 10px;
  display: inline;
}
#info_1_2 {
  width: 20%;
  height: 100%;
  float: left;
  padding: 10px, 10px;
  display: inline;
  font-size: small;
}
#b_name {
  height: 30%;
  float: top;
  padding-top: 10px;
  font-size: medium;
}
#u_name {
  height: 20%;
  font-size: small;
  float: top;
}
#tag {
  height: 20%;
  float: top;
  margin-right: 20px;
  padding: 5px;
}
#function {
  height: 30%;
  float: top;
  padding-top: 10px;
}
.tag {
  margin-right: 10px;
}
.mybutton {
  margin-right: 20px;
  padding: 10px, 10px, 10px, 10px;
}

.home {
  font-size: initial;
  font-family: "宋体";
}
</style>